<template>
  <div class="warehouse-product">
    <div class="search-condition">
      <el-form ref="searchForm" :model="searchForm" label-width="120px">
        <el-form-item label="编码" prop="proCode">
          <el-input
            label="商品编号"
            v-model="searchForm.proCode"
            placeholder="请输入商品编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="proName">
          <el-input
            label="商品名称"
            v-model="searchForm.proName"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
         <el-form-item label="商品分类" prop="typeId">
          <el-select v-model="searchForm.typeId" placeholder="商品分类">
            <el-option label="全部" value=""></el-option>
            <el-option label="分类一" value="1"></el-option>
            <el-option label="分类二" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="50px">
          <el-button type="primary" icon="el-icon-search" @click="getProductPage">查询</el-button>
          <el-button icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="middle-button">
      <WarehouseProductAdd @refreshData="refreshData"/>
    </div>
    <div class="table-container">
      <WarehouseProductTable :goodsList="goodsPage.data" @refreshData="refreshData"/>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="goodsPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodsPage.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
  
<script>
import WarehouseProductTable from "@/components/warehouse/WarehouseProductTable.vue";
import WarehouseProductAdd from "@/components/warehouse/WarehouseProductAdd.vue";

export default {
  components: { WarehouseProductTable, WarehouseProductAdd },
  name: "warehouseProductTable",
  data() {
    return {
      searchForm: {
        proCode: '',
        proName: '',
        typeId: '',
      },
      goodsPage: {},
      currentPage: 1,
      pageSize: 10,
      formLabelWidth: '80px'
    }
  },
  created() { 
    this.getProductPage();
  },
   methods: {
      handleSizeChange(val) {
       this.pageSize = val;
       this.getProductPage();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getProductPage();
     },

     //获取商品列表
     getProductPage() {
       const url = '/api/goods/page'
       const params = {
         pageNum: this.currentPage,
         pageSize: this.pageSize,
         proCode: this.searchForm.proCode,
         proName: this.searchForm.proName,
         typeId: this.searchForm.typeId,
       }
       this.$http
         .get(url, { params })
         .then(rs => { 
           if (rs.data.code == "200") {
            this.goodsPage = rs.data.data;
           } else {
            this.$message.error(rs.data.msg);
          }
         })
     },

     //刷新数据
     refreshData() {
       this.currentPage = 1;
       this.getProductPage();
     },
      
     //重置搜索表单
     resetSearchForm() {
       this.$nextTick(() => {
         this.$refs["searchForm"].resetFields();
       })
     },
    }
};
</script>
  
<style>
.search-condition {
  display: flex;
  margin: 10px 0;
}
.search-condition > form {
  display: flex;
}
.search-condition input {
  width: 200px;
}
.block{
  text-align: right;
}
</style>
  